{% extends 'partial/layout.njk' %}

{% block body %}
  <header class='demos-header'>
    <a href='/'>
      <h1 class="demos-title">查看任务</h1>
    </a>
    <p class="demos-sub-title">
      欢迎
      {{ user.name }}，每天进步一点点
    </p>
  </header>

  <div class="bd">
    <div class="page__bd">

      <form>

        <div class="weui-cells weui-cells_form">

         <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">昵称</label>
            </div>
            <div class="weui-cell__bd">
              攀登
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">小组</label>
            </div>
            <div class="weui-cell__bd">
              FJ6
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label for="date" class="weui-label">日期</label>
            </div>
            <div class="weui-cell__bd">
              2018-06-05
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label for="category" class="weui-label">类别</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                id="category"
                name="category"
                type="text"
                value="{{ taskList[0].category }}"
                {% if status == 'comment'%}
                disabled="disabled"
                {% endif %}>
            </div>
          </div>

          <div
            class="weui-cell"
            style="{% if category !== '服侍' %} display:none {% endif %}"
            id="serve">
            <div class="weui-cell__hd">
              <label for="netName" class="weui-label">服侍对象</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                id="serveMember"
                name="serveMemberName"
                placeholder="请输入被服侍者"
                type="text"
                value=""
                data-values="">
            </div>
          </div>

        </div>

        <div class="weui-cells weui-cells_form">
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label for="title" class="weui-label">概要</label>
            </div>
            <div class="weui-cell__bd">
              概要title
            </div>
          </div>
        </div>

        <div
            class="weui-cell"
            style="{% if category !== '每日汇报' %} display:none {% endif %}"
            id="report">
            <div class="weui-cell__hd">
              <label for="netName" class="weui-label">任务内容</label>
            </div>
            <div class="weui-cell__bd">
              尚未设定
            </div>
          </div>

        </div>

        <div class="weui-cells weui-cells_form">
          <div class="weui-cell">
            <div class="weui-cell__bd">
              抹腻子粉的时间，腻子粉最好是有机器搅匀，不能有颗粒。有颗粒，就会有微孔产生，导致后面要补两三遍，手工搅拌最容易出现这个问题。机器搅拌均匀之后容易抹平，后续工序少。
            </div>
          </div>
        </div>

      <form id="comment">
          <div class="weui-cells weui-cells_form">

            <div class="weui-cells__title">回复</div>
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <textarea class="weui-textarea" rows="4" name="content" placeholder="填写回复"></textarea>
              </div>
            </div>

            <input type="hidden" name="taskId" value="{{ taskList[0].id }}">
            <input type="hidden" name="fromPage" value="{{ fromPage }}">

          </div>

          <div class="demos-content-padded">
            <button class="weui-btn weui-btn_primary" type="submit">回复</button>
          </div>
    </div>
  </div>

  <div class="bd">
    <div class="page__bd">

      <formform>
      <div class="weui-cells__title">新任务内容</div>
        <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
          <div class="weui-textarea-counter"><span>0</span>/200</div>
        </div>
      </div>
       </div>
      </div>
     
     <div class='demos-content-padded'>
      <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default open-popup" data-target="#蛇的灵">蛇的灵</a> 
      <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default open-popup" data-target="#识别善恶">识别善恶</a>
      <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default open-popup" data-target="#大鱼">大鱼</a>
     </div>

     <div id="蛇的灵" class='weui-popup__container'>
     <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="weui-cells">
          <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
              <p>拍打腰部</p>
            </div>
            <div class="weui-cell__ft"></div>
          </a>
          <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
              <p>长时间灵里祷告</p>
            </div>
            <div class="weui-cell__ft"></div>
          </a>

        </div>
              
        <a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
      </div>
    </div>

    <div id="识别善恶" class='weui-popup__container'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="weui-cells">
          <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
              <p>拍打腰部</p>
            </div>
            <div class="weui-cell__ft"></div>
          </a>
          <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
              <p>长时间灵里祷告</p>
            </div>
            <div class="weui-cell__ft"></div>
          </a>

          <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
              <p>做仰卧起坐</p>
            </div>
            <div class="weui-cell__ft"></div>
          </a>


        </div>
              
        <a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
      </div>
    </div>

        <div class="weui-cells weui-cells_form">

        <div class="demos-content-padded">
          <button class="weui-btn weui-btn_primary" type="submit">确定</button>
        </div>
         <div class="demos-content-padded">
        <a class="weui-btn weui-btn_default" href="{{ fromPage }}">返回上一页</a>
         </div>

      </formform>

    </div>
  </div>

{% endblock %}

{% block script %}

  <script src="/public/js/jquery.serializejson.js"></script>
  <script src="/public/js/arteditor.min.js"></script>

  <script>
    $("#date").calendar();

    $('textarea')
      .each(function () {
        this.setAttribute('style', 'height:' + (
          this.scrollHeight
        ) + 'px;overflow-y:hidden;');
      })
      .on('input', function () {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
      });

    $("#serveMember").select(
      {title: "选择被服侍者", items: {{ serveMemberTree | dump | safe }}}
    );

    $("#category").select({
      title: "选择类别",
      items: ['服侍', '圣经学习', '医治释放','每日汇报']
    });

    $("#category").change(function () {
      var categoryStr = $(this).val();
      if (categoryStr == "服侍") {
        $("#serve").show();
      } else {
        $("#serve").hide();
        $("#serveMember").val('');
      }
    })

      $("#category").change(function () {
      var categoryStr = $(this).val();
      if (categoryStr == "每日汇报") {
        $("#report").show();
      } else {
        $("#report").hide();
      }
    })

    $("form").submit(function (event) {
      $.showLoading();

      event.preventDefault();

      var formData = $(this).serializeJSON();
      formData.content = formData
        .content
        .replace(/\r\n/ig, "<br>");
      formData.serveMemberId = $('#serveMember').data("values");

      $.post('/task/create', formData, function (data) {
        window.location = data.location;
      });
    });

    $("formform").submit(function (event) {
      $.showLoading();

      event.preventDefault();

      var formData = $(this).serializeJSON();
      formData.content = formData
        .content
        .replace(/\r\n/ig, "<br>");

      $.post('/task/create', formData, function (data) {
        window.location = data.location;
      });
    });

  </script>
{% endblock %}